<template>
  <div>
    <el-tabs type="border-card">
      <el-tab-pane label="我的信息">
        <div>
          <el-form
            :inline="true"
            :model="formInline"
            ref="formInline"
            :rules="rules"
            class="demo-form-inline"
            label-width="100px"
          >
            <div class="forms">
              <el-form-item label="用户账号：" prop="username">
                <el-input
                  readonly
                  style="width: 30vw"
                  v-model="formInline.username"
                  placeholder="审批人"
                ></el-input>
              </el-form-item>
              <el-form-item label="用户名称：" prop="nickname">
                <el-input
                  readonly
                  style="width: 30vw"
                  v-model="formInline.nickname"
                  placeholder="审批人"
                ></el-input>
              </el-form-item>
              <el-form-item label="性别：" prop="sex">
                <el-input
                  disabled
                  style="width: 30vw"
                  v-model="formInline.sex"
                  placeholder="审批人"
                ></el-input>
              </el-form-item>
              <el-form-item label="类型：" prop="type">
                <el-input
                  disabled
                  style="width: 30vw"
                  v-model="types"
                  placeholder="审批人"
                ></el-input>
              </el-form-item>
              <el-form-item label="练习电话：">
                <el-input
                  readonly
                  style="width: 30vw"
                  v-model="formInline.phone"
                  placeholder="审批人"
                ></el-input>
              </el-form-item>
              <el-form-item label="邮箱：">
                <el-input
                  readonly
                  style="width: 30vw"
                  v-model="formInline.email"
                  placeholder="审批人"
                ></el-input>
              </el-form-item>
              <el-form-item label="生效时间：">
                <el-date-picker
                  disabled
                  v-model="formInline.createtime"
                  type="date"
                  placeholder="选择日期"
                  style="width: 30vw"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="详细住址：">
                <el-input
                  disabled
                  style="width: 30vw"
                  v-model="formInline.homeaddress"
                  placeholder="审批人"
                ></el-input>
              </el-form-item>
              <el-form-item label="我的车位：">
                <el-input
                  readonly
                  style="width: 30vw"
                  v-model="formInline.parkname"
                  placeholder="审批人"
                ></el-input>
              </el-form-item>
              <el-form-item label="计费状态">
                <el-input
                  readonly
                  style="width: 30vw"
                  v-model="moneytype"
                  placeholder="审批人"
                ></el-input>
              </el-form-item>
              <el-form-item label="我的描述：">
                <el-input
                  readonly
                  type="textarea"
                  style="width: 70vw"
                  v-model="formInline.note"
                  placeholder="审批人"
                ></el-input>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
    <div class="head">
      <h2>头像信息/更换</h2>
      <div class="maessge">
        <img :src="imgs" alt="" />
        <el-upload
          class="avatar-uploader"
          :action="imgUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrlo" :src="imageUrlo" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrlo: "",
      imgUrl: "",
      token: sessionStorage.getItem("token"),
      imageUrl: "",
      formInline: {
        user: "",
        region: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户账号", trigger: "blur" },
        ],
        nickname: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
        sex: [{ required: true, message: "请输入性别", trigger: "blur" }],
        type: [{ required: true, message: "请输入类型", trigger: "blur" }],
      },
      imgs: "",
    };
  },
  created() {
    this.getList();
    this.imguu();
    this.head();
  },
  computed: {
    types() {
      if (this.formInline.type == 1) {
        return "管理员";
      } else {
        return "普通用户";
      }
    },
    moneytype() {
      if (this.formInline.coststatus == 1) {
        return "已缴费";
      } else {
        return "未缴费";
      }
    },
    uploadHeaders() {
      return {
        token: this.token, // 将 token 添加到请求头
      };
    },
  },
  methods: {
    imguu() {
      this.imgUrl = `http://community.byesame.com/users/updateIcon?token=${sessionStorage.getItem(
        "token"
      )}`;
    },
    onSubmit() {
      console.log("submit!");
    },
    async getList() {
      await this.$axios
        .post("/users/getMyId", {
          id: "",
          token: sessionStorage.getItem("token"),
        })
        .then((res) => {
          console.log(res);
          this.formInline = res.data[0];
        });
    },

    // 当前头像
    head() {
      this.$axios
        .get("/users/getUserByToken", {
          params: {
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          console.log(res);
          this.imgs = `http://community.byesame.com/file/${res.data.head}`;
        });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess(res, file) {
      console.log(res, file);
      this.$axios
        .post("/users/getMyId", {
          id: "",
          token: sessionStorage.getItem("token"),
        })
        .then((res) => {
          if (res) {
            this.imageUrlo = `http://community.byesame.com/file/${res.data[0].icon}`; // 更新 imageUrl
            if (this.$message) {
              this.$message({
                type: "success",
                message: "头像上传成功",
              });
            }
          } else {
            if (this.$message) {
              this.$message({
                type: "error",
                message: "获取图片 URL 失败",
              });
            }
          }
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.forms {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px 100px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.head {
  margin: 30px 10px 10px 10px;
  .maessge {
    display: flex;
    padding: 40px;
    // border: 1px solid  #ebeef5;
    border-radius: 6px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
  }
}
.avatar-uploader-icon {
  border: 1px solid #d9d9d9;
}
img {
  width: 260px;
}
</style>